<template>
  <div class="menu">
        <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#F5F7FA"
        >
          <template  v-for="(val , index) in menus">
            <el-submenu :index="index + ''" :key="index" v-if="!val.isflag">
              <template slot="title">
                <i :class=val.iconCLass></i>
                <span>{{val.name}}</span>
              </template>
              
              <el-menu-item-group v-for="(item , index) in val.children" :key="index">
                <el-menu-item :index="item.path">{{item.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </template>
          
        </el-menu>
      
  </div>
</template>

<script>
  export default {
    data(){
      return {
        menus: [],
      }
    },
    created() {
      this.menus = this.$router.options.routes  //所有路由信息
      // console.log(this.$route.matched);     //当前路由的路径信息 
    }
  }
</script>

<style scoped lang="less">
.menu{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #EBEDF0;
    .el-menu{
        width: 100%;
        height: 100%;
    }
}

</style>